<template>
  <div class="bigbox">
    <div class="topbox">
      <el-form ref="form" label-position="left" label-width="80px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="建筑群">
                  <FilterSelect2
                    v-model="buildingId"
                    :optionlist="qiyelist"
                    @updateModelValue="changeqiye"
                    :valuekey="{ name: 'name', value: 'id' }"
                  ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="申请时间">
                  <el-date-picker
                    style="width: 100%;"
                    v-model="monthvalue"
                    type="daterange"
                    size="small"
                    value-format="yyyy-MM-dd"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="用户">
                  <FilterSelect2
                    v-model="customerId"
                    :optionlist="yonghulist"
                    :valuekey="{ name: 'customerName', value: 'id' }"
                  ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="状态">
                  <el-select size="small" v-model="status" style="width: 100%;" clearable >
                    <el-option v-for="(item,index) in shenpilist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" style="margin-top: 4px;text-align: right;">
                <el-button size="small" @click="chongzhi">重 置</el-button>
                <el-button type="primary" size="small" @click="gettablelist()">查 询</el-button>
              </el-col>
          </el-row>
      </el-form>
    </div>
    <div class="bodybox">
      <div class="title">
        <div class="butti">
          <div>提现管理</div>
          <div style="display: flex;">
            <span style="margin-right: 10px;"><el-button @click="dialogVisible=true" type="primary" size="small">
              <i style="font-size: 12px;" class="iconfont icon-chongzhi"></i> 提现</el-button></span>
            <TopTile @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile>
          </div>
        </div>
      </div>
      <div class="table">
        <TableColumn
        ref="tabledata"
        :tableData="tableData" 
        :tableConfig="tableConfig" 
        :issize="issize">
        <el-table-column
         align="center"
         label="状态" >
         <template #default="{row}">
              <span v-if="row.statusName=='完成'" class="states green"></span>
              <span v-else-if="row.statusName=='关闭'" class="states red"></span>
              <span v-else class="states yellow"></span>
              <span>{{ row.statusName}}</span>
            </template>
       </el-table-column>
       <el-table-column
         label="审核状态" >
         <template #default="{row}">
              <span v-if="row.auditFlagName=='同意'" class="states green"></span>
              <span v-else-if="row.auditFlagName=='不同意'" class="states red"></span>
              <span v-else class="states yellow"></span>
              <span>{{ row.auditFlagName}}</span>
            </template>
       </el-table-column>
        <el-table-column
        label="操作"
        width="130">
        <template #default="{row}">
          <el-tooltip class="item" effect="dark" content="浏览" placement="top">
            <i @click="look(row)" class="el-icon-view" style="color:#1a90fe ;margin:0 15px; cursor: pointer;"></i>
          </el-tooltip>
          <!-- <i @click="tuikuan(row)" v-if="row.statusName=='已审核'" class="iconfont icon-tuikuan" style="color:#3dcc6d ;margin-right: 15px; cursor: pointer;"></i> -->
          <el-tooltip class="item" effect="dark" content="审核" placement="top">
            <i v-if="row.statusName=='待审核'" @click="shenhe(row)"  class="iconfont icon-shenhexitong" style="color: #fdd143; cursor: pointer;margin-right: 15px;"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="编辑" placement="top">
            <i v-if="row.statusName!=='已审核'&&row.statusName!=='完成'" @click="xiugai(row)"  class="el-icon-edit" style="color:#1a90fe ;margin-right: 15px; cursor: pointer;"></i>
          </el-tooltip>
          <!-- <i v-if="row.statusName!=='已审核'&&row.statusName!=='完成'" @click="del(row)" class="el-icon-delete" style="color: red;cursor: pointer;"></i> -->
        </template>
      </el-table-column>
      </TableColumn>
      </div>
        <!-- 底部分页 -->
        <div class="fenye">
          <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="pageobj.pageNo"
                :page-size="20"
                @current-change="gettablelist"
                :total="+totalCount">
        </el-pagination>
        </div>
     <!-- 充值弹窗 -->
    <div class="dialog">
    <el-dialog
      title="电费退款"
      :visible.sync="dialogVisible"
      width="45%">
      <div>
        <div class="headerbox">
          <span class="text">电费充值</span>
          <span><i @click="quxiao" class="el-icon-close"></i> </span>
        </div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="right" label-width="110px" :disabled="lookflag">
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属建筑群" prop="buildingId">
                <FilterSelect2
                    v-model="ruleForm.buildingId"
                    :optionlist="qiyelist"
                    @updateModelValue="chengjianzhuqun"
                    :valuekey="{ name: 'name', value: 'id' }"
                  ></FilterSelect2>
               </el-form-item>
            </el-col>
          </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户" prop="customerId">
              <FilterSelect2
                    v-model="ruleForm.customerId"
                    :optionlist="diayonghulist"
                    :valuekey="{ name: 'customerName', value: 'id' }"
                  ></FilterSelect2>
            </el-form-item>
          </el-col>
        </el-row>
         <template>
          <div class="diatext">
            <div class="text bgc">用户编号</div>
            <div class="text">{{ entity.customerNo }}</div>
            <div class="text bgc">用户余额</div>
            <div class="text">{{ entity.balance }}</div>
          </div>
         </template>
         <template>
          <div style="margin-bottom: 10px;">
            <el-table
              :data="tableDatas"
              border
              :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
              style="width: 100%">
              <el-table-column
                prop="roomName"
                label="房间名称">
              </el-table-column>
              <el-table-column
                prop="meterName"
                label="电表名称">
              </el-table-column>
              <el-table-column
              width="350"
                prop="Indications"
                label="电表示数">
              </el-table-column>
            </el-table>
          </div>
         </template>
         <el-row>
          <el-col :span="12">
            <el-form-item label="提现金额" prop="amount">
              <el-input v-model="ruleForm.amount" size="small" placeholder="请输入提现金额" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
         </el-row>
         <el-row>
          <el-col :span="12">
            <el-form-item label="提现方式" prop="payType">
                <el-select v-model="ruleForm.payType" placeholder="请选择提现方式" size="small" style="width: 100%;">
                  <el-option v-for="(item,index) in tuikuanlist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="ruleForm.payType=='OFFLINE'">
            <el-form-item label="线下提现方式" prop="offLineType">
                <el-select v-model="ruleForm.offLineType" placeholder="请选择线下提现方式" size="small" style="width: 100%;">
                  <el-option v-for="(item,index) in xianxialist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                </el-select>
            </el-form-item>
          </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
            <el-form-item label="提现账户" prop="refundAccount">
              <el-input v-model="ruleForm.refundAccount" size="small" placeholder="请输入提现账户" style="width: 100%;"></el-input>
            </el-form-item>
           </el-col>
           <el-col :span="12">
            <el-form-item label="提现姓名" prop="refundName">
              <el-input v-model="ruleForm.refundName" size="small" placeholder="请输入提现姓名" style="width: 100%;"></el-input>
            </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
            <el-form-item label="备注" >
              <el-input v-model="ruleForm.remark" size="small" placeholder="请输入备注" style="width: 100%;"></el-input>
            </el-form-item>
           </el-col>
         </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="quxiao">{{ lookflag ? '关闭':'取消' }}</el-button>
        <el-button v-show="!lookflag" size="small" type="primary" @click="yousure">确 定</el-button>
      </span>
    </el-dialog>
    </div>
    <!-- 审核弹窗 -->
    <div class="dialog">
      <el-dialog
      title="审核"
      :visible.sync="dialogVisibles"
      width="30%">
      <div>
        <el-form :model="shenheform">
          <el-row>
            <el-col :span="24">
              <el-form-item label="是否同意">
                <el-select size="small" v-model="shenheform.status" placeholder="请选择是否同意">
                  <el-option label="同意" value="20" class="option"></el-option>
                  <el-option label="不同意" value="10" class="option"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="审核意见">
                <el-input type="textarea" v-model="shenheform.refundCheckOpinion" style="width: 80%;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="shenhequxiao">取 消</el-button>
        <el-button size="small" type="primary" @click="shenhesure">确 定</el-button>
      </span>
    </el-dialog>
    </div>
    </div>
  </div>
</template>

<script>
import {getmeterlistapi} from '@/api/prwpaid/cost-management/Recharge'
import {gettabledatalistapi,postaddtuikuanapi,putupdatetuikuanapi,deletetuikuanapi,postshenheapi,postsuretuikuanapi} from '@/api/prwpaid/cost-management/Refund-Management'
import { getzidianxialaapi } from '@/api/guidelines'
import {gettablelistapi} from '@/api/prwpaid/user-manage/OpenAaccount'
import {getloginlistapi} from '@/api/prwpaid/file-management/Architectural-complex'
import TopTile from '@/components/TopTitle/index.vue'
import TableColumn from '@/components/Table/index.vue'
import {exportexcel} from '@/utils/excel'
export default {
  name: 'CallPoliceIndexs',
  components: {
    TopTile,
    TableColumn
  },
  data() {
    return {
      shenherow:{},
      shenheform:{},
      dialogVisibles:false,
      entity: {},
      tuikaunlist:[],
      xianxialist: [],
      tuikuanlist:[],
      diayonghulist:[],
      ruleForm:{},
      tableDatas:[],
      dialogVisible:false,
      yonghulist: [],
      shenpilist:[],
      monthvalue:['',''],
      buildingId: '',
      customerId: '',
      status:'',
      issize: 'medium',
      qiyelist: [],
      tableData: [],
      tableConfig: [
        { label: '序号', type:'index' ,center:'center',width:'70'},
        { label: '流水编号', prop: 'serialNumber' ,width:'140'},
        { label: '建筑群名称', prop: 'buildingName', width:"200"},
        { label: '用户名称', prop: 'customerName' },
        { label: '账户余额（退款冻结后）(元)', prop: 'balance' ,width:'180',center:'right' },
        { label: '退款方式', prop: 'payTypeName' },
        { label: '退款金额(元)', prop: 'amount' ,center:'right'},
        { label: '线下退款方式', prop: 'offLineTypeName' ,width:'110'},
        { label: '申请时间', prop: 'operationTime', center:'center',width:"180"},
        // { label: '状态', prop: 'statusName' , center:'center'},
        // { label: '审核状态', prop: 'auditFlagName' , center:'center'},
      ],
      totalCount: '',
      pageobj: {
        pageNo: 0,
        pageSize:20
      },
      rules: {
        buildingId: [
        { required: true, message: '请选择建筑群', trigger: 'blur' }
        ],
        customerId: [
        { required: true, message: '请选择用户', trigger: 'blur' }
        ],
        amount: [
        { required: true, message: '请输入退款金额', trigger: 'blur' }
        ],
        offLineType: [
        { required: true, message: '请选择线下退款方式', trigger: 'blur' }
        ],
        payType: [
        { required: true, message: '请选择退款方式', trigger: 'blur' }
        ],
        refundAccount: [
        { required: true, message: '请输入退款账户', trigger: 'blur' }
        ],
        refundName: [
        { required: true, message: '请输入退款姓名', trigger: 'blur' }
        ]
      },
      lookflag:false
    };
  },

  async mounted() {
    // 获取审批状态
    const yonghu = await getzidianxialaapi({ dictType: 'MBM_COST_RECHARGE_REFUND_STATUS' })
    this.shenpilist = yonghu.data.list
    const res = await getloginlistapi()
    this.qiyelist = res.data.list
    const localbuildingId = localStorage.getItem('buildingId')
    const isBuildIdInArray = this.qiyelist.some(item => item.id == localbuildingId);
    if(isBuildIdInArray){
      this.buildingId = localbuildingId ? localbuildingId : ''
      this.getyonghuxialalist(this.buildingId)
    }else{
      this.buildingId=''
    }
    this.gettablelist()
  },

  methods: {
    // 企业下拉
    changeqiye(val) {
      localStorage.setItem('buildingId', val)
      this.getyonghuxialalist(val)
    },
    // 获取用户
    async getyonghuxialalist(val) {
    const ress = await gettablelistapi({
        pageNo: 0, pageSize: 500,
      startDate: '', endDate: '', 
      state:'20',buildingId:val,customerType:''
    })
    this.yonghulist = ress.data.list
    },
    // 浏览
    async look(row) {
      this.lookflag=true
     this.xiugai(row)
    },
    // 确认退款
    tuikuan(row) {
      this.$confirm('此操作将对该用户进行完成提现, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await postsuretuikuanapi({ id: row.id })
          this.gettablelist()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退款'
          })
        })
    },
    // 弹窗确认/修改
    async yousure() {
      await this.$refs.ruleForm.validate()
      this.ruleForm.id ? await putupdatetuikuanapi({ ...this.ruleForm }).then(res => {
        this.$message({
              type: res.code == '200' ? 'success' : 'warning',
              message:res.code == '200' ?'修改成功':res.message
            })
      }):
      await postaddtuikuanapi({ ...this.ruleForm }).then(res => {
        this.$message({
              type: res.code == '200' ? 'success' : 'warning',
              message:res.code == '200' ?'新增成功':res.message
            })
      })
      this.quxiao()
      this.gettablelist()
    },
    // 修改
    async xiugai(row) {
      this.dialogVisible = true
      this.getzidian()
      this.ruleForm = { ...row }
      await this.chengjianzhuqun(row.buildingId)
      this.ruleForm.customerId = +row.customerId
      this.changeyonghu(row.customerId)
    },
    // 获取表格数据
    async gettablelist() {
      this.$refs.tabledata.loading=true
      const { data: { list, totalCount } } = await gettabledatalistapi({
        buildingId: this.buildingId, customerId: this.customerId,
        pageNo: this.pageobj.pageNo - 1, pageSize: this.pageobj.pageSize,
        status:this.status,startDate:this.monthvalue[0], endDate:this.monthvalue[1]
      })
      this.tableData = list
      this.totalCount = totalCount
      this.$refs.tabledata.loading=false
    },
    // 审核
    shenhe(row) {
      this.shenherow=row
      this.dialogVisibles=true
    },
    // 审核确认
    async shenhesure() {
      await postshenheapi({ ...this.shenheform, id: this.shenherow.id }).then(res => {
        this.$message({
              type: res.code == '200' ? 'success' : 'warning',
              message:res.code == '200' ?'操作成功':res.message
            })
      })
      this.shenhequxiao()
      this.gettablelist()
    },
    // 审核取消
    shenhequxiao() {
      this.shenheform={}
      this.dialogVisibles=false
    },
    // 删除
    del(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await deletetuikuanapi({ id: row.id })
          this.gettablelist()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 弹窗取消
    quxiao() {
      this.lookflag=false
      this.entity = {}
      this.ruleForm={}
      this.tableDatas = []
      this.dialogVisible=false
    },
     // 建筑群下拉
    async chengjianzhuqun(val) {
      const ress = await gettablelistapi({
        pageNo: 0, pageSize: 500,
      startDate: '', endDate: '', 
      state:'20',buildingId:val,customerType:''
      })
      this.ruleForm.customerId=''
      this.diayonghulist=ress.data.list
    },
    // 用户下拉
    async changeyonghu(val) {
      const { data: { entity } } = await getmeterlistapi({ customerId: val })
      this.entity = entity
      this.tableDatas=entity.meterReadInfo
    },
    // 重置
    chongzhi() {
      localStorage.removeItem('buildingId');
      this.buildingId = ''
      this.customerId = ''
      this.status=''
      this.monthvalue = ['', '']
      this.gettablelist() 
    },
  // 调节表格密度
  command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
   // 导出
   daochu() {
     exportexcel('mbm-microservice-biz/mbm/cost/cash/draw/exportExcel', {
      buildingId: this.buildingId, customerId: this.customerId,
        status:this.status,startDate:this.monthvalue[0], endDate:this.monthvalue[1]
      },'退款管理')
    },
    // 刷新列表
    shuaxin() {
      this.gettablelist() 
      this.$message.success('列表刷新成功')
    },
    async  getzidian() {
              // 获取退款方式
              const tuikuan = await getzidianxialaapi({ dictType: 'MBM_RECHARGE_CHANNEL' })
        this.tuikuanlist = tuikuan.data.list
        
        // 获取线下缴费方式
        const xianxia = await getzidianxialaapi({ dictType: 'MBM_OFFLINE_PAYTYPE' })
        this.xianxialist = xianxia.data.list
    }
  },
  watch: {
    async dialogVisible(val) {
      if (val) {
       this.getzidian()
      }
    }
  }
};
</script>

<style lang="scss" scoped>

.option{
  padding-left: 10px;
}
.bigbox{
  height: 100%;
  padding: 10px;
  .topbox{
    height: 80px;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 10px;
  }
  .bodybox{
    height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;
    .butti{
      display: flex;
      justify-content: space-between;
      }
      .table{
        height: 90%;
        margin-top: 10px;
        .states{
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-right: 10px;
        border-radius: 50%;
        }
        .red{
          background-color:red;
        }
        .green{
          background-color: #13ce66;
        }
        .yellow{
          background-color: #fdd143;
        }
      }
      .fenye{
        text-align: right;
      }
      .dialog{
        .headerbox{
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      .text{
        font-size: 18px;
        color: rgb(48, 49, 51);;
      }
      i{
        cursor: pointer;
      }
    }
    .diatext{
      margin-bottom: 10px;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
      border-top: 1px solid #ccc;
      border-right: 1px solid #ccc;
      .text{
        width: 25%;
        text-align: center;
        padding: 10px 0;
        border-left: 1px solid #ccc;
      }
      .bgc{
        background-color: #f1f1f1;
      }
    }
  }
  }
}
::v-deep .el-row{
  margin-bottom: 7px;
}
::v-deep .el-form-item__error{
  padding-top: 0;
  font-size: 10px;
}
::v-deep .el-dialog__footer{
  text-align: center;
}
::v-deep .el-dialog__header{
  display: none;
}
</style>